<template>
<div>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <!--标题-->
    <Table-title :title="TableTitle"></Table-title>
    <!--表格区域-->
    <div class="table-box">
        <h1 class="Basics-title">
            <h2>登记表</h2>
            <el-button type="build" @click="educationBuild">新建</el-button>
        </h1>
        <!--基本信息表格区域-->
        <div class="table-body">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="date" label="上缴礼品名称" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.$index!==EditIndex"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="礼品折价(元)" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.$index!==EditIndex"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="上缴礼金(元)" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.$index!==EditIndex"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="合计(元)" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.$index!==EditIndex"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="缴送部门" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.$index!==EditIndex"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="缴送时间" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.$index!==EditIndex"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="经手人" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.$index!==EditIndex"></el-input>
                    </template>
                </el-table-column>
                <!--按钮操作区域-->
                <el-table-column prop="address" label="操作" align="center" width="153">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="EducationEdit(scope.$index)" v-if="scope.$index!==EditIndex">编辑</el-button>
                        <el-button type="text" size="small" @click="EducationSave(scope.$index)" v-else>保存</el-button>
                        <el-button type="text" size="small" @click="EducationRemove(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <!--附件-->
    <Attachment-upload></Attachment-upload>
    <!--吸底按钮-->
    <Confirm-button></Confirm-button>
</div>
</template>

<script>
//  面包屑
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
//  标题
import TableTitle from "@/components/IncorruptibleArchives/TableTitle.vue";
import AttachmentUpload from "@/components/IncorruptibleArchives/AttachmentUpload.vue";
import ConfirmButton from "@/components/IncorruptibleArchives/ConfirmButton.vue";
export default {
    components: {
        Breadcrumb,
        TableTitle,
        AttachmentUpload,
        ConfirmButton,
    },
    data() {
        return {
            isEducationInput: true,
            EditIndex: -1,
            tableData: [],
            nameDisabled: false,
            ruleForm: {
                username: "",
                value1: "",
                textarea: "",
            },
            //标题传输的文字
            TableTitle: "主动上缴礼金、礼品情况登记表",
            //面包靴跳转数据
            Breadcrumb: [{
                    name: "廉政档案",
                    link: "IncorruptibleArchives",
                },
                {
                    name: "监督对象",
                    link: "supervise",
                },
                {
                    name: "监督对象详情",
                    link: "supervisedetail",
                },
                {
                    name: "新建档案",
                    link: "",
                },
            ],
        };
    },
    methods: {
        //教育新建
        educationBuild() {
            this.isEducationTable = true;
            this.tableData.push({
                date: "",
                name: "",
                address: "",
            });
        },
        EducationEdit(index) {
            this.EditIndex = index;
        },
        EducationSave(index) {
            this.EditIndex = -1;
        },
        EducationRemove(index) {
            console.log(index);
            // this.$set(this.educationtableData, index, []);
            this.educationtableData.splice(index, 1);
        },

    },
};
</script>

<style lang="less" scoped>
/deep/.table-box {
    padding: 20px;
    background-color: white;
    margin-bottom: 10px;

    .Basics-title {
        padding: 0 0 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        background-color: white;

        >h2 {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 16px;
            border-left: 4px solid #3d7fff;
            padding: 0 0 0 10px;
        }
    }

    .table-body {
        table {
            width: 100%;

            .table-lable {
                width: 8%;
                height: 46px;
                background: rgba(250, 250, 250, 1);
                font-size: 14px;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 21px;
                padding: 0 0 0 10px;
            }

            .table-input {
                padding: 0 10px;
            }

            .el-input {
                border-radius: 2px;

                .el-input__inner {
                    height: 36px;
                }
            }

            .el-select {
                width: 100%;
            }

            .NativePlace {
                // width: 100%;

                .el-select {
                    width: 32.8%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    width: 32.5%;
                    float: left;
                    margin-right: 10px;
                }
            }

            .NativePlace .el-input:last-child {
                margin-right: 0px;
            }

            .el-date-editor {
                width: 100%;

                .el-input__inner {
                    padding-left: 18px;
                }

                .el-input__prefix {
                    left: 91%;
                    top: -5%;
                }
            }

            /deep/.now-load {
                // width: 100%;
                // display: flex;
                .el-select {
                    width: 40.5%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    float: left;
                    width: 57%;
                }
            }

            //输入框的最小高度
            .el-textarea {
                margin: 4px 0;

                .el-textarea__inner {
                    min-height: 370px !important;
                }
            }
        }
    }
}

.el-button--build {
    width: 70px;
    height: 30px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(61, 127, 255, 1);
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(61, 127, 255, 1);
    line-height: 22px;
}
</style>
